<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Test 'text-underline-position: under' with vertical-align. The
    horizontal lines should not cross the 'p' letter in word 'ipsum'. None of
    the numbered texts are vertically aligned, yet the three horizontal lines
    for each of the two rows should align perfectly, that is, it should appear
    as if there are two long horizontal lines. Bugzilla link:
    http://webkit.org/b/102795.</p>

    <div class="under">
        <p>&nbsp;1 lorem ipsum&nbsp;&nbsp;
            <span style="vertical-align: 3em;">&nbsp;2 lorem ipsum&nbsp;&nbsp;</span><span style="vertical-align: -2em;">&nbsp;3 lorem ipsum&nbsp;&nbsp;</span><br>
            &nbsp;4 lorem ipsum&nbsp;&nbsp;
            <span style="vertical-align: middle">&nbsp;5 lorem ipsum&nbsp;&nbsp;<span style="vertical-align: middle">&nbsp;6 lorem ipsum&nbsp;&nbsp;</span></span>
        </p>
    </div>
</body>
</html>
